<template>
  <input type="text" v-model="firstName" /> +

  <input type="text" v-model="lastName" /> =

  <input type="text" v-model="fullName" />
</template>

<script>
import { ref, computed } from "vue"
export default {
  name: "HelloWorld",
  // vue2写法
  //#region
  // data() {
  //   return {
  //     firstName: "张",
  //     lastName: "三",
  //   }
  // },
  // computed: {
  // vue2写法
  // 简单写法的计算属性
  // fullName() {
  //   return this.firstName + "-" + this.lastName
  // }, // 这样无法做到响应式
  // 复杂写法的计算属性
  // fullName: {
  //   get() {
  //     return this.firstName + "-" + this.lastName
  //   },
  //   set(value) {
  //     console.log(value)
  //     const str = value.split("-")
  //     this.firstName = str[0]
  //     this.lastName = str[1]
  //   },
  // },
  //#endregion
  // vue3写法
  setup() {
    let firstName = ref("张")
    let lastName = ref("三")
    // vue3中计算属性的简单写法
    // let fullName = computed(() => {
    //   console.log(firstName, lastName)
    //   // return firstName + "-" + lastName // 不能直接这样来使用ref数据
    //   // 直接报错,必须使用.value的形式来设置ref的值
    //   // 因为这些值都是用ref来完成响应式操作的
    //   return firstName.value + "-" + lastName.value
    //   // 但是这样写类似于vue2中的简单写法,虽然不报错了,但是实际fullname并没有实现响应式
    //
    // })
    let fullName = computed({
      get() {
        return firstName.value + "-" + lastName.value
      },
      set(val) {
        const arr = val.split("-")
        firstName.value = arr[0]
        lastName.value = arr[1]
      },
    })
    return {
      firstName,
      lastName,
      fullName,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
